<template>
   
  <seacrh :keyword="keyword"></seacrh>
  <el-empty :image-size="200" v-if="route.query.total == 0" description="没有对应商品" />
  <div class="cardbox">
    <el-card
      :body-style="{ padding: '0px' }"
      v-for="(item, index) in product"
      :key="index"
      @click="store.dispatch('goproductsellpage', item.product_id)"
    >
      <img
        :src="`http://localhost:3001/${item.product_picture}`"
        class="image"
      />
      <div style="padding: 14px">
        <div class="pricebox">
          <div class="sellprice">￥{{ item.product_selling_price }}</div>
          <div class="price">￥{{ item.product_price }}</div>
        </div>

        <div class="name" v-html="item.product_name"></div>
        <div v-html="item.product_intro" class="intro"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import seacrh from "../../components/search/seacrh.vue";
import { onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { useRoute, onBeforeRouteUpdate, useRouter } from "vue-router";

const store = useStore();
const route = useRoute();
const router = useRouter();
const keyword = ref(route.query.keyword);
const product = ref(JSON.parse(route.query.product));

const Highlight = () => {
  product.value.forEach((item) => {
    let reg = new RegExp(keyword.value, "ig");
    let replaceString = `<span style="color: #ed4014">${keyword.value}</span>`;
    item.product_name = item.product_name.replace(reg, replaceString);
    item.product_intro = item.product_intro.replace(reg, replaceString);
  });
};

// watch: {
//  '$route' (to, from) {
//   console.log(this.getStatus(this.$route.path))
//  }
watch(
  () => router.currentRoute.value,
  (newValue) => {
    product.value = JSON.parse(route.query.product);
    keyword.value = route.query.keyword;
    Highlight();
  },
  { immediate: true }
);

// onMounted(() => {
//   if(route.query.total == 0){
//     console.log(route.query.total,'route.query.total')
//   }
//   console.log("key", keyword);
// });
// onBeforeRouteUpdate(()=>{
//     console.log('2',route.query)
// })
</script>

<style scoped>
.cardbox {
  display: flex;
  flex-flow: wrap;
}
.image {
  width: 320px;
  height: 400px;
  display: block;
}
.name {
  width: 290px;
  margin: 10px 0;
  text-align: center;
  overflow: hidden;
  font-weight: 700;
}
.el-card {
  margin: 20px;
  text-align: center;
}
.pricebox{
  display: flex;
  justify-content: center;
}
.sellprice {
  color: #fd3f31;
  font-size: 20px;
}
.price{
  text-decoration: line-through;
  color: #888888;
}
.intro {
  width: 290px;
  height: 42px;
}
</style>
